//创建路由器
import { createRouter, createWebHistory } from 'vue-router'

//导入组建
import Login from '@/views/Login.vue';
import LayoutVue from '@/views/Layout.vue';
import ArticleCategoryVue from '@/views/article/ArticleCategory.vue';
import ArticleManageVue from '@/views/article/ArticleManage.vue';
import UserAvatarVue from '@/views/user/UserAvatar.vue';
import UserInfoVue from '@/views/user/UserInfo.vue';
import UserResetPasswordVue from '@/views/user/UserResetPassword.vue';


//定义访问的路径和对应的关路由系
const routes = [ // 里面是数组哦
  {
    path: '/login', component: Login
  },
  {
    path: '/',
    component: LayoutVue, redirect: '/article/manage', // 重定向
    children: [ // 子路由
      { path: 'article/category', component: ArticleCategoryVue },
      { path: 'article/manage', component: ArticleManageVue },
      { path: 'user/avatar', component: UserAvatarVue },
      { path: 'user/info', component: UserInfoVue },
      { path: 'user/resetPassword', component: UserResetPasswordVue }
    ]
  }

]


//创建路由器 调用导入的模块 createRouter() 里面写的是对象
const router = createRouter({
  /**
   * 不过需要注意的是，使用 Web History 模式时，
   * 需要服务器配置以支持路由的前端处理，
   * 以避免在直接访问特定路由时出现 404 错误
   */
  history: createWebHistory(), //这种模式下，URL 中不会出现 # 符号，而是更加友好和语义化。
  routes: routes
})


//导出路由器
export default router
